<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>懒加载</title>
</head>
<style>
	* {
		margin: 0;
		box-sizing: border-box;
	}

	.imgs {
		display: flex;
		flex-direction: column;
		position: relative;
	}

	img {
		width: 300px;
		height: 400px;
	}

	.test {
		height: 200px;
		border: 1px solid;
	}
</style>

<body>
	<!--clientHeight：元素内部的高度(CSS height + CSS padding) 这个属性是只读属性
        clientWidth：元素内部的快读(CSS width + CSS padding) 这个属性是只读属性
        clientTop:元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。
        clientLeft:左边框的宽度
        offsetTop：相对于最近的祖先（ offsetParent ）定位元素（CSS position属性被设置为 relative 、 absolute 或 fixed 的元素）的高度偏移值,如果没有相对于body

        获取视口高度  window.innerHeight|| document.documentElement.clientHeight
        滚动的高度   window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    -->
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="test"></div>
	<div class="box imgs">
		<img id="img1" class="img" data-url="https://unsplash.it/250/532/?random" />
		<img class="img" data-url="https://unsplash.it/250/694/?random" />
		<img class="img" data-url="https://unsplash.it/250/610/?random" />
		<img class="img" data-url="https://unsplash.it/250/611/?random" />
		<img class="img" data-url="https://unsplash.it/250/612/?random" />
		<img class="img" data-url="https://unsplash.it/250/613/?random" />
		<img class="img" data-url="https://unsplash.it/250/614/?random" />
		<img class="img" data-url="https://unsplash.it/250/615/?random" />
		<img class="img" data-url="https://unsplash.it/250/616/?random" />
	</div>

	<script>
		/* 方式一 */
		window.onload = function () {
			var imgs = document.querySelectorAll('img');

			var viewHeight = document.documentElement.clientHeight || window.innerHeight;

			lazyLoad();

			window.onscroll = lazyLoad;

			function lazyLoad() {
				for (let item of imgs) {
					let x = item.getBoundingClientRect().top;
					console.log(x.toFixed(0), item.clientHeight);


					if (x > -item.clientHeight && x < viewHeight - 0) {
						// 如果滚动过快，x值将小于0，也不显示img

						if (!item.getAttribute('show')) {
							item.src = item.dataset.url;

							item.setAttribute('show', true);
						}
					}
				}
			}
		};

		/* 方式二 */
		// const io = new IntersectionObserver(callback)

		// let imgs = document.querySelectorAll('img') // 将图片的真实url设置为data-src src属性为占位图 元素可见时候替换src

		// function callback(entries) {
		//     entries.forEach((item) => { // 遍历entries数组
		//         if (item.isIntersecting) { // 当前元素可见
		//             item.target.src = item.target.dataset.url  // 替换src
		//             io.unobserve(item.target)  // 停止观察当前元素 避免不可见时候再次调用callback函数
		//         }
		//     })
		// }

		// imgs.forEach((item) => {  // io.observe接受一个DOM元素，添加多个监听 使用forEach
		//     io.observe(item)
		// })

		// 1 懒加载 未验证
		// function lazyload() {
		//     const imgs = document.getElementsByTagName('img');
		//     const len = imgs.length;
		//     // 视口的高度
		//     const viewHeight = document.documentElement.clientHeight;
		//     // 滚动条高度
		//     const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
		//     for (let i = 0; i < len; i++) {
		//         const offsetHeight = imgs[i].offsetTop;
		//         if (offsetHeight < viewHeight + scrollHeight) {
		//             const src = imgs[i].dataset.src;
		//             imgs[i].src = src;
		//         }
		//     }
		// }

		// 可以使用节流优化一下
		// window.addEventListener('scroll', lazyload);
	</script>
</body>

</html>